import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import EffectContainer from "@/components/effectContainer";
import { Button, message } from "antd";
import React, { CSSProperties, useEffect, useState } from "react";
import { Description } from "@/components/description";
import { getCode } from "@/api/codeApi.ts";
import Code from "@/components/code";

const voiceBox: CSSProperties = {
  margin: "0 auto",
  width: "300px",
  height: "300px",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
};

export const VoiceBroadcast = () => {
  const [isSpeak, setIsSpeak] = useState(false);
  const [info, setInfo] = useState("这是一段文本");
  const [messageApi, contextHolder] = message.useMessage();
  const [code, setCode] = useState("");
  useEffect(() => {
    getCode("/voiceBroadcast/语音播报.txt").then(({ data }) => {
      setCode(data);
    });
  }, []);
  const play = () => {
    if (window.speechSynthesis) {
      try {
        setIsSpeak(!isSpeak);

        const speech = new SpeechSynthesisUtterance();
        speech.rate = 4; // 语速
        // 替换为你要朗读的文本内容
        speech.text = info;
        speech.onend = (event) => {
          //语音合成结束时候的回调
          console.log("结束了");
          setIsSpeak(false);
          messageApi.open({
            type: "success",
            content: "语音播报结束了~",
          });
        };
        window.speechSynthesis.speak(speech);
      } catch (e) {
        console.log("当前浏览器不支持语音播报!");
      }
    }
  };

  const handlerChange = (e) => {
    setInfo(e.target.value);
  };

  useEffect(() => {
    if (!isSpeak) {
      stopSpeak();
      return;
    }
  }, [isSpeak]);

  const stopSpeak = () => {
    setIsSpeak(false);
    window.speechSynthesis.cancel();
  };

  return (
    <>
      {contextHolder}
      <FirstTitle title="语音播报" />
      <SubTitle title="window.speechSynthesis" />
      <Description
        info={
          <>
            <span style={{ width: "100%" }}>
              SpeechSynthesisUtterance主要用来构建语音合成实例，speechSynthesis用来触发浏览器语音模块，让浏览器把内容读出来。
            </span>
            <span style={{ paddingLeft: "10px" }}>
              1.text – 要合成的文字内容，字符串
            </span>
            <span style={{ paddingLeft: "10px" }}>
              2.lang – 使用的语言，字符串， 例如："zh-cn"
            </span>
            <span style={{ paddingLeft: "10px" }}>
              3.voiceURI – 指定希望使用的声音和服务，字符串
            </span>
            <span style={{ paddingLeft: "10px" }}>
              4.volume – 声音的音量，区间范围是0到1，默认是1
            </span>
            <span style={{ paddingLeft: "10px" }}>
              5.rate – 语速，数值，默认值是1，范围是0.1到10，2是正常语速
            </span>
            <span style={{ paddingLeft: "10px" }}>
              6.pitch –
              表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
            </span>

            <span style={{ width: "100%" }}>方法</span>
            <span style={{ paddingLeft: "10px" }}>
              speak() –
              只能接收SpeechSynthesisUtterance作为唯一的参数，作用是读合成的话语
            </span>
            <span style={{ paddingLeft: "10px" }}>
              stop() – 立即终止合成过程
            </span>
            <span style={{ paddingLeft: "10px" }}>pause() – 暂停合成过程</span>
            <span style={{ paddingLeft: "10px" }}>
              resume() – 重新开始合成过程
            </span>
            <span style={{ paddingLeft: "10px" }}>
              getVoices() –
              此方法不接受任何参数，用来返回浏览器支持的语音包列表，是个数组
            </span>

            <span style={{ width: "100%" }}>回调</span>
            <span style={{ paddingLeft: "10px" }}>
              onstart – 语音合成开始时候的回调
            </span>
            <span style={{ paddingLeft: "10px" }}>
              onpause – 语音合成暂停时候的回调
            </span>
            <span style={{ paddingLeft: "10px" }}>
              onresume – 语音合成重新开始时候的回调
            </span>
            <span style={{ paddingLeft: "10px" }}>
              onend – 语音合成结束时候的回调
            </span>
          </>
        }
      ></Description>
      <EffectContainer
        effect={
          <div style={voiceBox}>
            <textarea
              onChange={handlerChange}
              value={info}
              style={{
                padding: "5px",
                width: "300px",
                height: "300px",
                marginBottom: "20px",
              }}
            />
            <Button onClick={play}>开始语音播报</Button>
          </div>
        }
        code={<Code content={code} />}
      />
    </>
  );
};
